<template>
  <!-- 根组件 -->
  <div class="pageRoot">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row>
        <el-col :span="4">
          <el-button type="primary" @click="showDialog('addRole')">添加角色</el-button>
        </el-col>
      </el-row>
      <el-table :data="roles" border style="width: 100%; height:auto;max-height: 600px;overflow:auto" stripe>
        <!-- 设置展开列 type=expand -->
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-row class="line1" v-for=" item1 of props.row.children" :key="item1.id">
              <el-col :span="6">
                <el-tag closable @close="del(props.row,item1.id)">{{item1.authName}}</el-tag>
                <i class="el-icon-caret-right"></i>
              </el-col>
              <el-col :span="18">
                <el-row class="line2" v-for=" item2 of item1.children" :key="item2.id">
                  <el-col :span="6">
                    <el-tag type="success" closable @close="del(props.row,item2.id)">{{item2.authName}}</el-tag>
                    <i class="el-icon-caret-right"></i>
                  </el-col>
                  <el-col :span="18" class="line3">
                    <el-tag type="warning" class="tag3" closable @close="del(props.row,item3.id)" v-for=" item3 of item2.children" :key="item3.id">{{item3.authName}}</el-tag>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <!-- <pre>  {{props.row.children}}</pre> -->
          </template>
        </el-table-column>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="roleName" label="角色名称" width="180"></el-table-column>
        <el-table-column prop="roleDesc" label="角色描述"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="primary" icon="el-icon-edit" @click="showDialog('editRole',scope.row)">编辑</el-button>
            <el-button size="small" type="danger" icon="el-icon-delete" @click="showDialog('delRole',scope.row.id)">删除</el-button>
            <el-button size="small" type="warning" icon="el-icon-s-tools" @click="showSet(scope.row)">权限分配</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <add-role ref="addRole"></add-role>
    <edit-role ref="editRole"></edit-role>
    <del-role ref="delRole"></del-role>
    <!-- 权限分配弹窗 -->
    <el-dialog title="权限分配" :visible.sync="dialog" @close="setClose">
      <el-tree ref="tree" :data="perm" show-checkbox node-key="id" :default-checked-keys="checkArr" :props="defaultProps"></el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog=false">取 消</el-button>
        <el-button type="primary" @click="allot">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import addRole from '../../dialog/addRole'
import editRole from '../../dialog/editRole'
import delRole from '../../dialog/delRole'

export default {
  name: '',
  components: { addRole, editRole, delRole },
  data () {
    return {
      roles: [], // 所有角色列表数据
      dialogShow: false,
      roleId: 0,
      dialog: false, // 控制权限分配弹窗
      perm: [], // 权限数据列表
      checkArr: [], // 默认选中的权限数据数组
      defaultProps: {
        // 控制树形结构显示效果
        children: 'children',
        label: 'authName'
      }
    }
  },
  created () {
    this.getRoles()
  },
  methods: {
    // 获取角色列表数据
    async getRoles () {
      const { data: res } = await this.axios.get('roles')
      if (res.meta.status !== 200) { return this.$message.error('获取角色列表失败') }
      this.roles = res.data
    },
    // 获取所有三级权限id
    getPermId (node, arr) {
      // 判断传入的node中是否包含children属性，
      //  如果不包含向数组添加当前node的id
      if (!node.children) {
        return arr.push(node.id)
      } else {
        //   node中包含children属性则遍历children，递归调用该方法
        node.children.forEach(item => {
          this.getPermId(item, arr)
        })
      }
    },
    // 展示权限弹窗
    async showSet (role) {
      this.roleId = role.id
      const { data: res } = await this.axios.get('rights/tree')
      if (res.meta.status !== 200) { return this.$message.error('获取权限列表失败') }
      this.perm = res.data
      this.getPermId(role, this.checkArr)

      this.dialog = true
    },
    // 弹窗关闭
    setClose () {
      this.checkArr = []
    },
    // 权限确定
    async allot () {
      const keyArr = [
        ...this.$refs.tree.getCheckedKeys(),
        ...this.$refs.tree.getHalfCheckedKeys()
      ]

      let keyArrStr = keyArr.join()
      const { data: res } = await this.axios.post(
        `roles/${this.roleId}/rights`,
        { rids: keyArrStr }
      )

      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg)
      } else {
        this.$message.success(res.meta.msg)
        // 关闭弹窗
        this.dialog = false
        // 重新获取数据
        this.getRoles()
      }
    },
    // 开启其他弹窗
    showDialog (...val) {
      this.dialogShow = true
      this.$refs[val[0]].openDialog([this.dialogShow, val[1]])
    },

    // 删除三级权限
    del (role, rightId) {
      this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { data: res } = await this.axios.delete(
            `roles/${role.id}/rights/${rightId}`
          )
          console.log(res)
          if (res.meta.status !== 200) {
            this.$message.error(res.meta.msg)
          } else {
            this.$message.success(res.meta.msg)
            // 重新设置数据
            // this.getRoles();
            role.children = res.data
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style scoped >
.line1 {
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
}
.line2 {
  padding: 5px 0;
}
.tag3 {
  margin: 2px;
}
</style>
